<template>
  <div class="conetr">
    <div class="center-board" v-loading="loading">
      <div class="center-title">
        <h3>
          <span v-if="props.type == 'handle'">处理</span>
          <span v-else>详情信息</span>
        </h3>
      </div>
      <div class="action-bar mb-[20px]">
        <el-button icon="Back" type="primary" plain text @click="backTo">返回</el-button>
        <el-button type="primary" plain @click="submitForm" v-if="props.type == 'handle'">
          确定
        </el-button>
      </div>
    </div>
    <el-form ref="formRef" :model="orderFor" :rules="rules" label-width="120px">
      <el-form-item label="申请人员">
        <el-input
          v-model="orderFor.ownName"
          placeholder="请输入"
          :disabled="true"
          style="width: 400px"
        />
      </el-form-item>
      <el-form-item label="房屋信息">
        <el-input
          v-model="orderFor.houseNeighborhood"
          placeholder="请输入"
          :disabled="true"
          style="width: 400px"
        />
      </el-form-item>
      <el-form-item label="申请时间">
        <el-date-picker
          v-model="orderFor.settleApplyTime"
          type="datetime"
          format="YYYY/MM/DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 400px"
          :disabled="true"
        />
      </el-form-item>
      <el-form-item label="使用订单">
        <!-- <MultiImageUpload
          v-model="orderFor.linkContractFile"
          disabled
          :showTip="false"
          :limit="orderFor.linkContractFile?.length ?? 0"
        /> -->
        <div>
          <el-image
            style="width: 100px; height: 100px; margin-left: 10px"
            :src="getUrl(value.url)"
            v-for="(value, index) in orderFor.linkContractFile || []"
            :key="index"
            @click="openImg(value.url)"
          />
          <el-image-viewer
            v-if="showImg"
            :url-list="srcList"
            show-progress
            :initial-index="0"
            @close="showImg = false"
          />
        </div>
      </el-form-item>
      <el-form-item label="详情列表">
        <BasePageTable
          :table-data="orderFor.coupons"
          style="max-width: 1000px; max-height: 300px"
          :table-columns-data="tableColumnsData"
        >
          <template #type="{ row }">
            {{ VOUCHER_TYPE_ENUM_JSON[row.type] }}
          </template>
        </BasePageTable>
      </el-form-item>
      <el-form-item label="核销总积分">
        <el-input
          v-model="orderFor.totalCoins"
          placeholder="请输入"
          :disabled="true"
          style="width: 400px"
        />
      </el-form-item>
      <el-form-item label="开工/安装时间">
        <el-date-picker
          v-model="orderFor.operationStartTime"
          type="datetime"
          format="YYYY/MM/DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 400px"
          :disabled="true"
        />
      </el-form-item>
      <el-form-item label="成果展示">
        <MultiImageUpload
          v-model="orderFor.file"
          disabled
          :showTip="false"
          :limit="orderFor.file?.length ?? 0"
        />
      </el-form-item>
      <el-form-item label="是否通过" required>
        <template v-if="props.type == 'handle'">
          <el-select
            v-model="orderFor.status"
            placeholder="请选择"
            style="width: 400px"
            :disabled="props.type == 'look'"
          >
            <el-option label="通过" :value="3" />
            <el-option label="驳回" :value="4" />
          </el-select>
        </template>
        <template v-else>
          {{ orderFor.statusName }}
        </template>
      </el-form-item>
      <el-form-item label="驳回理由" v-if="orderFor.status == 4" required>
        <el-input
          v-model="orderFor.auditDesc"
          style="width: 400px"
          :rows="2"
          type="textarea"
          placeholder="驳回理由"
          :disabled="props.type == 'look'"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import listApi from "@/api/coupon/couponList";
import { VOUCHER_TYPE_ENUM_JSON } from "@/enums/coupon/coupon";

// 1. 正确定义 props
const props = defineProps({
  // 1 是装修知识的type固定字段 2是装修案例
  type: {
    type: String,
    required: true,
    default: "add",
  },
  orderData: {
    type: Object,
    default: null,
  },
});
const orderFor = ref({
  ownName: "",
  houseNeighborhood: "",
  settleApplyTime: "",
  coins: 0,
  operationStartTime: "",
  status: 3,
  auditDesc: "",
  file: [],
  linkContractFile: [],
});
const tableColumnsData = ref([
  {
    prop: "type",
    label: "代金券类型",
    showOverflowTooltip: true,
    customSlot: "type",
  },
  {
    prop: "couponCode",
    label: "代金券券码",
    showOverflowTooltip: true,
  },
  {
    prop: "coins",
    label: "核销积分",
    showOverflowTooltip: true,
  },
  {
    prop: "usageTime",
    label: "核销时间",
    showOverflowTooltip: true,
  },

  {
    prop: "merchantUserName",
    label: "核销人员",
    showOverflowTooltip: true,
  },
]);
const loading = ref(false);
// 4. 定义 emit 以便向父组件通知状态变化
const emit = defineEmits(["backTo"]);
const { proxy } = getCurrentInstance();
const showImg = ref(false);
const srcList = ref([]);

// 3. 监听父组件传入的 dialogShow
watch(
  () => props.orderData,
  () => {
    orderFor.value = props.orderData;
    if (orderFor.value?.linkContractFile && !Array.isArray(orderFor.value?.linkContractFile)) {
      orderFor.value.linkContractFile = JSON.parse(orderFor.value?.linkContractFile);
    }
    if (orderFor.value?.file && !Array.isArray(orderFor.value?.file)) {
      orderFor.value.file = JSON.parse(orderFor.value?.file);
    }
    if (props.type == "handle") {
      orderFor.value.status = "";
    }
  },
  { immediate: true }
);

const submitForm = async () => {
  proxy.$refs["formRef"].validate(async (valid) => {
    if (valid) {
      loading.value = true;
      let params = {
        id: orderFor.value.id,
        status: orderFor.value.status,
        auditDesc: orderFor.value.auditDesc,
      };
      listApi
        .audit(params)
        .then((res) => {
          ElMessage.success("审核成功");
          backTo();
        })
        .catch((err) => {
          // ElMessage.error("审核失败");
        })
        .finally(() => {
          loading.value = false;
        });
    }
  });
};
function getUrl(val) {
  if (val && val.includes(".pdf")) {
    return "https://djucloud-prod.oss-cn-shanghai.aliyuncs.com/mini_program_dir/pdfs.png";
  } else {
    return val;
  }
}

function openImg(val) {
  if (val && val.includes(".pdf")) {
    window.open(val, "_blank");
  } else {
    showImg.value = true;
    srcList.value = [val];
  }
}
function backTo() {
  emit("backTo");
}
</script>
<style scoped lang="scss">
.conetr {
  padding: 10px;
  background-color: #fff;
  position: relative;
  flex: 1;
  margin-left: 10px;
  box-sizing: border-box;
  background-color: #fff;
  padding: 10px 20px;

  .center-board {
    .center-title {
      position: absolute;
      left: 20px;
    }
    .action-bar {
      position: relative;
      box-sizing: border-box;
      padding: 10px 0 15px 0;
      border-bottom: 1px solid var(--el-border-color-extra-light);
      display: flex;
      align-items: center;
      justify-content: flex-end;

      u .delete-btn {
        color: #f56c6c;
      }
    }
  }
}
</style>
